<script setup>
import { onMounted, ref, watch } from 'vue'
import { findFileType } from '@/utils/FileUtils'

const props = defineProps({
  progress: {
    type: ref,
    default: ref(0)
  },
  type: {
    type: String,
    default: '0'
  },
  fileName: {
    type: String,
    default: ''
  }
})


const emit = defineEmits(['complete'])
const message = ref('')
const status = ref()
const filePrefix = process.env.VUE_APP_BASE_URL

watch(props.progress, (n, o) => {
  if (n === 100) {
    if ('0' === props.type) {
      message.value = '下载完成'
    } else if ('1' === props.type) {
      message.value = '上传完成'
    }
    status.value = 'success'
    emit('complete', '1')
  }
})

onMounted(() => {
  if ('0' === props.type) {
    message.value = '下载中...'
  } else if ('1' === props.type) {
    message.value = '上传中...'
  }
})

</script>

<template>
  <div class="task-list">
    <div class="task-item">
      <div class="preview-grid">
        <img class="preview" v-if="'IMAGE' === findFileType(fileName)"
             :src="filePrefix + fileName" alt="">
        <svg v-else class="icon preview" aria-hidden="true">
          <use :xlink:href="'#icon-' + findFileType(fileName)"></use>
        </svg>
      </div>
      <div class="file-name">
        <span>{{ fileName }}</span>
      </div>
      <el-progress
          :percentage="progress.value"
          :status="status"
      />
      <span class="tips">{{ message }}</span>
    </div>
  </div>
</template>

<style scoped lang="less">

.task-item {
  width: 290px;
  display: grid;
  grid-template-columns: 50px 1fr;
  grid-template-rows: 1fr 1fr;
  align-items: center;

  .preview-grid {
    grid-column-start: 1;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 4;

    .preview {
      width: 32px;
      height: 32px;
    }
  }

  .file-name {
    width: 180px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

</style>